<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix" v-if="searchbar">
			<om-topsearch :placeholder="placeholder" @cancel="cancel" :focus="focus"  @confirm="confirm"></om-topsearch>
		</view>
		<view class="page__bd" :style="searchbar?'padding-top: 100rpx;':''">
			<uni-list v-show="showData">
				<view v-for="(item, index) in datas" :key="index">
					<uni-list-item 
						:avatar="index + 1"
						@click="itemtap(item)"
						:title="getName(item)"
						:note="getNote(item)"
						:extraText="getExtra(item)"
						>
					</uni-list-item>
				</view>
			</uni-list>
		 </view>
	</om-page>
</template>

<script>
	import {
		hasValue,
		changeTreeData
	} from '@/static/js/formUtil.js';
	export default {
		data() {
			return {
				searchbar:true,
				method:'get',//url对应的服务器方法的请求类型
				cachename:'',//缓存名称（必有）
				url: '',//服务器路径（必有）
				namefield: "dicname",//保证正确，显示属性,列标题
				namesplit:"|",//间隔符
				notefield: "",//保证正确，显示属性，列副标题
				notesplit:"|",//间隔符
				extrafield: "",//保证正确，显示属性，列右侧提示
				extrasplit:"|",//间隔符
				searchfield: "",//查询属性
				placeholder:"请输入关键字",
				other: {},//其他查询属性
				initload: false,//是否初始加载数据
				searchStr:"",//用户输入值
				datas:[],
				pageTitle:"",
				focus:false,
				likefield:"",//返回数据中的用于比较的字段名
				initdataList:[],
				loaded:false,
				defaultData:"",
				showData:true
			}
		},
		created: function () {
		  this.initData = this._.debounce(this.initData, 300)
		},
		watch:{
			datas:{
				handler(newValue, oldValue){
					if(this.initdataList.length == 0 && newValue.length){
						this.initdataList = newValue
					}
				},
				deep:true
			}
		},
		methods: {
			confirm(e){
				let _that = this;
				if (e && e.value) {
				  if (!this.searchStr || (this.searchStr && this.searchStr != e.value.trim())) {
					this.searchStr = e.value.trim()
					_that.initData()
				  }
				}else{
					this.searchStr = ''
					if(this.initload){
						_that.initData()
					}else{
						this.datas= []
					}
				}
			}, //点击选型确定input值
			//点击x触发
			cancel(){
				this.datas= []
			},
			initData(){
				let query = {}
				let _that = this
				Object.assign(query, this.other)
				if(this.searchfield){
					query[this.searchfield] = this.searchStr
				}
				if(!_that.loaded) {
					_that.loaded = true
					if(this.url){
						_that.om.request(this.url,query,this.method).then(res => {
							if (res) {
							  //if (res instanceof Array) {
							  if(Object.prototype.toString.call(res)==='[object Array]'){
								 let arr = changeTreeData(res)
							    _that.datas = arr
							  //} else if(res.value && res.value instanceof Array){
							  } else if(res.value && Object.prototype.toString.call(res.value)==='[object Array]'){
								_that.datas= changeTreeData(res.value)
							  }
							}
						})
					}
				} else {
					if(this.initdataList.length){
						var arr = []
						if(this.likefield){
							arr = this.likefield.split("|")
						}
						if(this.namefield){
							arr = [...arr, this.namefield.split(this.namesplit)]
						}
						if(this.notefield){
							arr = [...arr, this.notefield.split(this.notesplit)]
						}
						if(this.extrafield){
							arr = [...arr, this.extrafield.split(this.extrasplit)]
						}
						var datas = _that.initdataList.filter(re=>{
							if(_that.searchStr){
								for(var i=0; i<arr.length; i++){
									if(Object.prototype.toString.call(arr[i]) == '[object Array]' ){
										for(let item of arr[i]){
											if(~re[item].indexOf(_that.searchStr)){
												return true
											}
										}
									}else{
										if(~re[arr[i]].indexOf(_that.searchStr)){
											return true
										}
									}
								}
								return false
							}else{
								return _that.initload
							}
						})
						if(!_that.showData){
							_that.showData = true
						}
						_that.datas = datas
					}
				}
			},
			itemtap: function(item) {
			   uni.setStorage({
				 key: this.cachename,
				 data: item
			   })
				//回主页面
				uni.navigateBack();
			 },
			getName(item){
				var s = ""
				if(this.namefield){
					var arr = this.namefield.split(this.namesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.namesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 },
			 getNote(item){
				var s = ""
				if(this.notefield){
					var arr = this.notefield.split(this.notesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.notesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			 },
			 getExtra(item){
				var s = ""
				if(this.extrafield){
					var arr = this.extrafield.split(this.extrasplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.extrasplit + " " + item[e]
								} else {
									if(item[e].toString() == "true"){
										s += "√"
									}else if(item[e].toString() == "false"){
										s += ""
									}else{
										s+= item[e]
									}
								}
							}
						})
					}
				}
				return s
			 }
		},
		onLoad(options) {
			this.pageTitle = options.title||"搜索"
			uni.setNavigationBarTitle({
			  title: this.pageTitle
			})
			if(!options.cachename){//缓存名称
				uni.navigateBack()
			}
			this.cachename = options.cachename
			this.likefield = options.likefield || ""
			if(!options.url){//搜索路径
				let _that = this
				if(options.defaultData){
					uni.getStorage({
						key:options.otherCache,
						success:(res)=>{
							_that.datas = res.data
						}
					})
				}else{
					uni.navigateBack()
				}
			}
			this.url = options.url || ''
			if(options.initload){//数据是否初始加载
				this.initload = true
			}
			if(options.namefield){//加载对象列表的显示属性
				this.namefield = options.namefield
			}
			if(options.searchfield){//加载对象列表的显示属性
				this.searchfield = options.searchfield
			}
			if(options.notefield){//加载对象列表的显示属性
				this.notefield = options.notefield
			}
			if(options.extrafield){//加载对象列表的显示属性
				this.extrafield = options.extrafield
			}
			if(options.method){//加载对象列表的显示属性
				this.method = options.method
			}
			if(options.placeholder){//加载对象列表的显示属性
				this.placeholder = options.placeholder
			}
			if(options.other){//其他查询参数
				var json = JSON.parse(options.other);
				for(var j in json){
					if(hasValue(json[j])){
						this.other[j] = json[j];
					}
				}
			}
			if(options.showData == "false"){
				this.showData = false
			}
			if(options.namesplit){//间隔符
				this.namesplit = options.namesplit
			}
			if(options.notesplit){//间隔符
				this.notesplit = options.notesplit
			}
			if(options.extrasplit){//间隔符
				this.extrasplit = options.extrasplit
			}
			if(options.searchbar == false ||  options.searchbar == "false"){//查询栏
				this.searchbar = false
			}
			this.confirm()
			let _that = this
			this.$nextTick(function(){
				_that.focus = true
			})
		}
	}
</script>

<style>

</style>
